import React, { Component } from "react";
import avatar from 'assest/img/avatar.png'
import Footer from "components/Footer";
import './index.scss';
import {Link} from 'react-router-dom';
import {inject,observer} from 'mobx-react'

class My extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }
  state = {};

  // 登出
  logout() {
    this.props.store.updatePhone('');
    this.props.store.updateToken('');
  }

  render() {
    let {phone,token} = this.props.store;

    return (
      <div className="my-center">
      <div className="header flex aic pt-20 pb-20">
          <img className="avatar ml-30" src={avatar} alt=""/>
          {
              !!token?<p className="ml-10 fff f16">{phone}</p>:<Link to="/login" style={{color:'#fff'}} className="ml-10 fff f16">立即登录</Link>
          } 
      </div>
      <div className="bg-fff pl-15 pr-15">
          <div className="item mt-10 bg-fff flex aic jc-sb">
              <span>我的订单</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"> </span>
          </div>
          <div className="item bg-fff flex aic jc-sb">
              <span>我的共享卡</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"> </span>
          </div>
          <div
              className="item bg-fff flex aic jc-sb">
              <span>我的优惠劵</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"></span>
          </div>
          <Link to="/love" className="item bg-fff flex aic jc-sb"> <span>我想去</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"> </span>
          </Link>
          <Link to="/browse" className="item bg-fff flex aic jc-sb">
              <span>我的足迹</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"> </span>
          </Link>
          <div onClick={this.logout} className="item bg-fff flex aic jc-sb">
              <span>退出登录</span>
              <span className="f888 icon iconfont f18 icon-yuanquanyoujiantou am-icon-md"> </span>
          </div>
      </div>
      <Footer name="my" />
  </div> 
    );
  }
}

export default inject('store')(observer(My));
